<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="http://localhost:8080/layui/css/layui.css">

    <script src="//cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

    <script type="text/javascript" src="http://localhost:8080/layui/layui.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-rTTiRUKnSWaDu2FjhzWFl8/JuUZMlplyWE/djenb2LoKqkgLGfEGfSrL7XDLoB1M" crossorigin="anonymous">
</head>
<body>
<div class="nav"><h3>宠物商店后台管理系统 </h3></div>
<div class="row">
    <!--    左侧导航栏-->
    <div class="rowleft">
        <ul class="layui-nav layui-nav-tree" lay-filter="test">
            <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
            <li id="data" class="layui-nav-item"><a href="/petback/data">产品和用户数据</a></li>
            <li id="pet" class="layui-nav-item">
                <a href="javascript:;">商品管理</a>
                <dl class="layui-nav-child">
                    <dd><a id="cat" href="/petback/cats">管理--猫</a></dd>
                    <dd><a id="dog" href="/petback/dogs">管理--狗</a></dd>
                    <dd><a id="fish" href="/petback/reptiles">管理--鱼</a></dd>
                    <dd><a id="birds" href="/petback/birds">管理--鸟</a></dd>
                </dl>
            </li>
            <li id="order" class="layui-nav-item"><a href="/petback/order">订单管理</a></li>
            <li id="user" class="layui-nav-item"><a href="/petback/user">用户信息管理</a></li>
        </ul>
    </div>
    <!--    右侧搜索栏-->
    <div style="display: flex;flex-direction: column; align-items: center; width: 100%;">
        <div class="rowrighttop"
             style=" width: 100%; margin-top: 10px;margin-bottom: 10px; display: flex;flex-direction: row;justify-content: flex-end;align-items: center;">
            <div class="topleftbutton" style="margin-right: auto;flex: 1">
                <ul class="nav nav-tabs" style="background-color: white;">
                    <li role="presentation"><a href="javascript:state(0)">未发货</a></li>
                    <li role="presentation"><a href="javascript:state(1)">运输中</a></li>
                    <li role="presentation"><a href="javascript:state(2)">已签收</a></li>
                </ul>
            </div>
            <div class="input-group" style="margin-left: 10px">
                <input type="text" id="search_input" class="form-control" placeholder="Search for...">
                <span class="input-group-btn">
                    <button id="search_btn" class="btn btn-default" type="button">Go!</button>
                    </span>
            </div>
        </div>
        <div class="rightbody" style="width: 100%">
            <table class="table table-hover" style="width:100%;">
                <thead>
                <tr>
                    <th>Number</th>
                    <th>ItemID</th>
                    <th>Name</th>
                    <th>Phone</th>
                    <th>Company</th>
                    <th>Address</th>
                </tr>
                </thead>
                <tbody id="tablelsw">
                </tbody>
            </table>
            <button class="btn btn-primary" onclick="first()">第一页</button>
            <button class="btn btn-primary" onclick="pre()">上一页</button>
            <button class="btn btn-primary" onclick="next()">下一页</button>
            <button class="btn btn-primary" onclick="last()">最后一页</button>
            第<span id="spanPageNum"></span>页/共<span id="spanTotalPage"></span>页
        </div>
    </div>
</div>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-Nj1D6pu2WnJojj+67GiU9ZFNwbl7bUWX5Kj5MS22C8bGjllemM9pvQyvj14zJb58"
        crossorigin="anonymous"></script>
</body>

<script>
    var theTable = document.getElementById("tablelsw");
    var totalPage = document.getElementById("spanTotalPage");
    var pageNum = document.getElementById("spanPageNum");
    var numberRowsInTable = theTable.rows.length; //后端
    var pageSize = 6;
    var page = 1;

    //下一页
    function next() {
        if (page < parseInt(pageCount())) {
            hideTable();
            currentRow = pageSize * page;
            maxRow = currentRow + pageSize;
            if (maxRow > numberRowsInTable) maxRow = numberRowsInTable;
            for (var i = currentRow; i < maxRow; i++) {
                theTable.rows[i].style.display = '';
            }
            page++;
            showPage();
        } else {

        }
    }

    //上一页
    function pre() {
        if (Number(pageNum.innerText) === 1) {

        } else {
            page--;
            hideTable();
            currentRow = pageSize * page;
            maxRow = currentRow - pageSize;
            if (currentRow > numberRowsInTable) currentRow = numberRowsInTable;
            for (var i = maxRow; i < currentRow; i++) {
                theTable.rows[i].style.display = '';
            }
            showPage();
        }
    }

    //第一页
    function first() {
        hideTable();
        page = 1;
        for (var i = 0; i < pageSize; i++) {
            theTable.rows[i].style.display = '';
        }
        showPage();
    }

    //最后一页
    function last() {
        page = pageCount();
        hideTable();
        currentRow = pageSize * (page - 1);
        for (var i = currentRow; i < numberRowsInTable; i++) {
            theTable.rows[i].style.display = '';
        }
        showPage();
    }

    function hideTable() {
        for (var i = 0; i < numberRowsInTable; i++) {
            theTable.rows[i].style.display = 'none';
        }
    }

    function showPage() {
        pageNum.innerHTML = page;
    }

    //总共页数
    function pageCount() {
        var count = 0;
        if (numberRowsInTable % pageSize != 0) {
            count = 1;
        }
        return parseInt(numberRowsInTable / pageSize) + count;
    }

    //隐藏表格
    function hide() {
        for (var i = pageSize; i < numberRowsInTable; i++) {
            theTable.rows[i].style.display = 'none';
        }
        totalPage.innerHTML = pageCount();
        pageNum.innerHTML = '1';
    }

    //选中效果函数
    $("#order").addClass("changecolor")

    //运输状态函数
    function state(num) {
        $("#tablelsw").empty()
        requestData(num)
    }

    function requestData(num) {
        $.ajax({
            url: 'http://localhost:8080/petback/order/getOrdersByStatus/' + num,
            type: 'GET',
            contentType: 'application/json',
            dataType: 'text',
            success: function (data) {
                let json = JSON.parse(data);
                console.log(json['msg'])
                for (let i = 0; i < json['msg'].length; i++) {
                    $("#tablelsw").append("<tr>\n" +
                        "                    <td>" + json['msg'][i].number + "</td>\n" +
                        "                    <td>" + json['msg'][i].itemid + "</td>\n" +
                        "                    <td>" + json['msg'][i].name + "</td>\n" +
                        "                    <td>" + json['msg'][i].phone + "</td>\n" +
                        "                    <td>" + json['msg'][i].company + "</td>\n" +
                        "                    <td>" + json['msg'][i].address + "</td>\n" +
                        "                </tr>")
                }
                numberRowsInTable = theTable.rows.length;
                hide();
                $("#tablelsw>tr").click(function () {
                    let number = $(this).children().first().text();
                    location.href = "http://localhost:8080/petback/details?number=" + number;
                })

            }
        })
    }

    $(".nav-tabs>li").click(function () {
        $(".nav-tabs>li").removeClass("active")
        $(this).addClass("active")
        console.log()
    })

    $(".nav-tabs>li").first().addClass("active")
    requestData(0)

    $("#search_btn").click(function () {
        let search_content = $("#search_input").val();
        $.ajax({
            url: "http://localhost:8080/petback/order/getOrderByNumber/" + search_content,
            type: "GET",
            contentType: "application/json",
            dataType: "text",
            success: function (data) {
                let json = JSON.parse(data);
                let table_body = $("#tablelsw");
                table_body.empty();
                table_body.append("<tr>\n" +
                    "                    <td>" + json['msg'].number + "</td>\n" +
                    "                    <td>" + json['msg'].itemid + "</td>\n" +
                    "                    <td>" + json['msg'].name + "</td>\n" +
                    "                    <td>" + json['msg'].phone + "</td>\n" +
                    "                    <td>" + json['msg'].company + "</td>\n" +
                    "                    <td>" + json['msg'].address + "</td>\n" +
                    "                </tr>")
                numberRowsInTable = theTable.rows.length;
                hide();
                $("#tablelsw>tr").click(function () {
                    let number = $(this).children().first().text();
                    location.href = "http://localhost:8080/petback/details?number=" + number;
                })
            }
        })
    })
</script>

<style>
    .nav {
        background-color: #9F9F9F;
        width: 100%;
        height: 50px;
        text-align: center;
    }

    .rowleft {
        width: 200px;
        height: 550px;
        background-color: #393d49;
    }

    .row {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }

    .changecolor {
        background-color: #009999;
    }
</style>

</html>
